<template>
  <div style="width: 90%; margin: 0 auto">
    <!-- 查询框 -->
    <el-row style="margin-left: -78px">
      <el-col :span="20">
        <el-date-picker
          v-model="year"
          type="year"
          placeholder="选择年"
          value-format="yyyy"
          :editable=false
        ></el-date-picker>
        <el-select v-model="com_id" clearable placeholder="请选择客户">
          <el-option
            v-for="com in comList"
            :key="com.com_id"
            :label="com.com_name"
            :value="com.com_id"
          >
          </el-option>
        </el-select>
        <el-button icon="el-icon-search" @click="drawCharts()">查询</el-button>
      </el-col>
    </el-row>
    <!-- 柱状图图 -->
    <el-row>
      <div id="Serve" :style="{ width: '1100px', height: '440px' }"></div>
    </el-row>
    <el-row>
      <!-- 服务列表 -->
      <el-table
        ref="ServeList"
        :data="ServeListData"
        highlight-current-row
        stripe
        border
        value-format="yyyy-MM"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>

        <el-table-column
          property="svr_status"
          label="条目"
          align="center"
          :formatter="idTotext"
        ></el-table-column>
        <el-table-column
          property="amount"
          label="数量"
          align="center"
          :formatter="appendCount"
        ></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ServeListData: [],

      // 查询值
      year: "",
      com_id: "",

      comList: [],
    };
  },
  methods: {
    idTotext(row, column) {
      //console.log(row.svr_status);
      if (row.svr_status == 0) {
        return "咨询";
      } else if (row.svr_status == 1) {
        return "建议";
      } else if (row.svr_status == 2) {
        return "计划";
      }
    },

    appendCount(row, colunm) {
      return row.amount + "个";
    },
    drawCharts() {
      this.$axios
        .get("/serve/count", {
          params: {
            year: this.year,
            com_id: this.com_id,
          },
        })
        .then((resp) => {
          if (resp.data.status == 1000) {
            //console.log(resp.data.data);
            this.ServeListData = resp.data.data;

            // 基于准备好的满意度dom，初始化echarts实例
            let Serve = this.$echarts.init(document.getElementById("Serve"));
            let dataSourceServe = this.ServeListData;
            // 绘制满意度图表
            Serve.setOption({
              title: {},
              legend: {
                orient: "horizontal",
              },
              // 全局调色盘。
              color: ["#fc6b05", "#ffb63b", "#65b107", "#99d8d8", "#9bb7bb"],
              dataset: {
                source: dataSourceServe,
              },
              grid: {
                containLabel: false,
              },
              // 声明一个 X 轴，数值轴。
              xAxis: {},
              // 声明一个 Y 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
              yAxis: { type: "category", show:false,axisLine: { show: false },axisTick: { show: false } },

              series: [
                {
                  type: "bar",
                  encode: {
                    // 将 "amount" 列映射到 X 轴。
                    x: "amount",
                    // 将 "product" 列映射到 Y 轴。
                    y: "svr_status",
                  },
                  colorBy: "data",
                  label: {
                    show: true,
                    fontSize: 16,
                    formatter: function (params) {
                      //console.log(2);
                      //console.log(params.name);
                      if (params.name == 0) {
                        return "咨询："+params.data.amount + "个";
                      } else if (params.name == 1) {
                        return "建议："+params.data.amount + "个";
                      } else if (params.name == 2) {
                        return "计划："+params.data.amount + "个";
                      }
                    },
                  },
                },
              ],
            });
          }
        });
    },
  },

  mounted() {
    this.drawCharts();
    this.$axios
      .get("/companies")
      .then((resp) => {
        if (resp.data.status == 200) {
          this.comList = resp.data.data;
        }
      })
      .catch((error) => {});
  },
};
</script>